<template>
  <div class="home-box">
    <el-container class="home-container">
      <el-aside class="aside-box">
        <div class="title-box" @click="goHome">
          <img :src="platformLogo" alt="">
          <!-- <span>{{ platformName }}</span> -->
        </div>
        <el-menu ref="menu" :default-active="state.activeMenu" class="el-menu-vertical menu-box" :collapse-transition="true"
          background-color="#1d232d" text-color="#777b81" active-text-color="#ffffff" unique-opened :router="true">
          <template v-for="item in state.menuList">
            <!-- 有子集 -->
            <el-sub-menu :index="item.perms" :key="item.perms"
              v-if="item.children.length > 0 && item.type < 100 && isShowMenu(item.menuTag)" class="padding-l">
              <template #title>
                <span :title="item.name">{{ item.name }}</span>
                <span class="badge" v-show="item.badge">{{ item.badge }}</span>
              </template>

              <!-- 有二级子集 -->
              <template v-for="subItem in item.children">
                <el-sub-menu :key="subItem.perms" :index="subItem.perms"
                  v-if="subItem.children.length > 0 && item.type < 100 && isShowMenu(subItem.menuTag)">
                  <template #title>
                    <span>{{ subItem.name }}</span>
                  </template>

                  <!-- 三级 -->
                  <template v-for="thrItem in subItem.children">
                    <el-menu-item :key="thrItem.perms" :index="thrItem.perms"
                      v-if="thrItem.isShow && item.type < 100 && isShowMenu(thrItem.menuTag)">
                      {{ thrItem.name }}
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>

              <!-- 无二级子集 -->
              <template v-for="subItem in item.children">
                <el-menu-item :key="subItem.perms" :index="subItem.perms"
                  v-if="subItem.children.length == 0 && item.type < 100 && isShowMenu(subItem.menuTag)">
                  <span style="margin-left:20px;">{{ subItem.name }}</span>
                  <span class="badge" v-show="subItem.badge">{{
                subItem.badge
                }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>

            <!-- 无子集 -->
            <el-menu-item :key="item.perms" :index="item.perms"
              v-if="item.children.length == 0 && item.type < 100 && isShowMenu(item.menuTag)">
              <span>{{ item.name }}</span>
            </el-menu-item>

          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header-box">
          <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item in state.breadList" :key="item"
              :to="{path:item.path}">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="head-portrait" style="margin-left:auto;">
            <el-avatar icon="UserFilled" />
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎您 {{ (state.userInfo && state.userInfo.name) || '' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="editpassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="editpass">修改手机号</el-dropdown-item>
                  <el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main-box">
          <router-view class="f-contnet"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal } from '@/utils/utils'
import { useStateStore } from '@/store'
import api from './api'

const route = useRoute()
const router = useRouter()
const store = useStateStore()

const platformName = computed(() => {
  return store.getPlatformName
});

const platformLogo = computed(() => {
  return store.getPlatformLogo
})

const msgnoReadForm = computed(() => {
  return store.msgnoReadForm
})

const msgRefreshTime = computed(() => {
  return store.msgRefreshTime
})

const state = reactive({
  activeMenu: '/welcome',
  breadList: [],
  menuList: [
    {
      name: '首页',
      perms: '/welcome',
      type: 1,
      children: [],
    },
    {
      name: '用户管理',
      perms: '/userManage',
      type: 1,
      children: [],
    },
  ],
  menuIds: [],
  userInfo: {},
  myTimer: null,
  onOffLineMenu: null,
})

watch(() => route.matched, (newVal, oldVal) => {
  setBreadAndActive()
})

// 设置面包屑和菜单选中
function setBreadAndActive() {
  const myArr = []
  const routeList = route.matched[route.matched.length - 1].path.split('/')
  state.activeMenu = '/' + routeList[1]
  route.matched.map(item => {
    if (item.path == '/home') return
    myArr.push(item)
  })
  state.breadList = myArr
}

function handleCommand(command) {
  switch (command) {
    case 'outLogin':
      router.push({ path: '/' })
      api.companyQuit().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
      break
    case 'editpass':
      router.push({ path: '/changePass' })
      break
    case 'editpassword':
      router.push({ path: '/editPass' })
      break
  }
}

function getnewMessageCount() {
  api.newMessageCount().then(res => {
    if (res.code == '200') {
      store.setMsgnoReadForm(res.data)
    } else {
      warningDeal(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

function toMsgMng() {
  router.push({ path: '/msgMng' })
}

function toHelp() {
  window.open('https://jihehao.yilianyun.top/distribution/help.html', '_blank')
}

function tabRecursive(list) {
  list && list.map(item => {
    state.menuIds.push(item.menuId)
    if (item.children && item.children.length > 0) {
      tabRecursive(item.children)
    }
  })
}

function isShowMenu(list) {
  return true
  let isShow = false
  if (state.onOffLineMenu && state.onOffLineMenu != 'all') {
    isShow = !list || list.includes(state.onOffLineMenu)
  } else {
    isShow = true
  }
  return isShow
}

function onOffChange(e) {
  window.localStorage.setItem('onOffLineMenu', e)
}

function goHome() {
  router.push({ path: '/welcome' })
}

onMounted(() => {
  console.log('onMounted')

  state.userInfo = JSON.parse(window.localStorage.getItem('USER_INFO_INRE'))

  state.menuIds = []
  const myMenuList = window.localStorage.getItem('USER_MENU_INRE')
  // state.menuList = JSON.parse(myMenuList)
  tabRecursive(state.menuList)
  store.setMenuIds(state.menuIds)
  setBreadAndActive()

  window.addEventListener('storage', event => {
    if (event.key === 'USER_INFO_INRE') {
      state.userInfo = JSON.parse(event.newValue)
    }
  })
  // getnewMessageCount()
  // clearInterval(state.myTimer)
  // state.myTimer = setInterval(() => {
  //   getnewMessageCount()
  // }, state.msgRefreshTime);
  state.onOffLineMenu = window.localStorage.getItem('onOffLineMenu')
})

onBeforeUnmount(() => {
  // clearInterval(state.myTimer)
})
</script>

<style scoped lang='scss'>
.home-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .home-container {
    width: 100%;
    height: 100%;
  }
}
.title-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  color: #ffffff;
  background-color: #1d232d;
  font-weight: bold;
  font-size: 18px;
  box-sizing: border-box;
  padding: 10px 0;
  cursor: pointer;
  > img {
    width: 150px;
  }
  > span {
    margin-top: 10px;
  }
}
:deep(.el-menu) {
  flex-grow: 1;
  border-right: none;
  .el-menu-item {
    height: 40px;
    padding: 0 !important;
    padding-left: 30px !important;
    &:hover {
      background: linear-gradient(90deg, #0796d3, #18d9cb) !important;
      color: #ffffff !important;
    }
  }
  .el-sub-menu__title {
    padding: 0 !important;
    padding-left: 30px !important;
  }
  .el-menu--inline {
    background-color: #14171e !important;
  }
  .is-active {
    .el-sub-menu__title {
      background-color: #1d232d !important;
    }
    &:not(.el-sub-menu__title) {
      color: #ffffff !important;
      background: linear-gradient(90deg, #0796d3, #18d9cb) !important;
    }
  }
}
.aside-box {
  width: 200px;
  display: flex;
  flex-flow: column;
}
.header-box {
  display: flex;
  align-items: center;
  .header-icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    > div {
      display: flex;
      align-items: center;
      color: #737373;
      font-size: 14px;
      gap: 3px;
      cursor: pointer;
      > img {
        height: 16px;
      }
      &:hover {
        color: #0081ff;
        > .unactive {
          display: none;
        }
        > .active {
          display: block;
        }
      }
      .unactive {
        display: block;
      }
      .active {
        display: none;
      }
    }
  }
  .head-portrait {
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}
.main-box {
  background-color: #f1f4f6;
  // .f-contnet {
  //   overflow-y: auto;
  //   overflow-x: hidden;
  //   background: #ffffff;
  //   box-shadow: 0px 0px 12px rgba(19, 20, 22, 0.08);
  //   // height: 100%;
  //   padding: 20px;
  // }
}
.pop-box {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.select-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
  background-color: #1d232d;
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    background-color: #14171e !important;
  }
}
</style>
